﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>标签管理</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
    <style>
    .ta-center{text-align:center}
    .width {width: 24%;line-height: 30px;margin-left: 7%;margin-top: 20px;}
    .width90{width:92%;margin:auto}
    .m-bottom{margin-bottom:20px;clear: both;}
    .m-right{margin-right:10%}
    .bg-gray{background-color:#f4f4f4}
    .block{color:#2d2d2d;height:20px;line-height:20px}
    .f-left{float:left}
    .m-left5{margin-left:5px}
    .boss-word{width:12px;height:12px;margin-top:4px;float:left;border-radius:12px;}
    .b-solid{border-bottom:solid 1px #E7E7E7}
    .left {display: block;float: left;}
    .label-sliod {border: solid 1px #ccc;}
    .f24 {font-size: 24px;font-weight: bold;}
    /*.boss-tag1{background-color:#06CA97;}
    .boss-tag2{background-color:#4ba9f1;}
    .boss-tag3{background-color:#f6b94d;}
    .boss-tag4{background-color:#4ba9f1;}
    .boss-tag5{background-color:#f6b561;}*/
    </style>
</head>

<body>
    <!--标签列表-->
    <div class="list">
    </div>
  
    <div id="dialog" style="display:none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd" style="padding-bottom:10px;">
                <strong class="weui-dialog__title">新建标签</strong>
            </div>
            <div class="weui-dialog__bd">
                <input type="text" class="lh30 tagname" />
            </div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" onclick="closeDialog()">取消</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="addTag()">确定</a>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/base.js"></script>
    <script src="../js/client.js"></script>
    <script type="text/javascript">
        var clientId = getQueryString("clientid");
        var staffId = getQueryString("staffId");
        $(function () {
            loadAllTag();
            //GetClientTagList(clientId, staffId);
        });
        function loadAllTag() {
            ajaxGet(siteApiList.ClientTagList + "?staffid=" + staffId, function (data) {
                if (!isJsonSuccess(data))
                    return;
                if (data.Data == null) return;
                var list = data.Data;
                var arr = getCategoryList();
               
                var html = "";
                for (var i = 0; i < arr.length; i++) {
                    html += "<div class='b-solid f12 gray-small'>"
                    if (arr[i].CategoryId == 1 || arr[i].CategoryId == 2) {
                        html += "<div class='weui-cells__title f16 yahei block'><div class='boss-word boss-tag1' style='background-color:rgb(99, 243, 207)'></div><div class='f-left m-left5'>" + arr[i].name + "</div></div>";
                    } else if (arr[i].CategoryId == 3 || arr[i].CategoryId == 4) {
                        html += "<div class='weui-cells__title f16 yahei block'><div class='boss-word boss-tag2'style='background-color:#4ba9f1;'></div><div class='f-left m-left5'>" + arr[i].name + "</div></div>";
                    } else if (arr[i].CategoryId == 5 || arr[i].CategoryId == 6) {
                        html += "<div class='weui-cells__title f16 yahei block'><div class='boss-word boss-tag3'style='background-color:#f6b94d;'></div><div class='f-left m-left5'>" + arr[i].name + "</div></div>";
                    } else if (arr[i].CategoryId == 7) {
                        html += "<div class='weui-cells__title f16 yahei block'><div class='boss-word boss-tag4'style='background-color:#4ba9f1;'></div><div class='f-left m-left5'>" + arr[i].name + "</div></div>";
                    } else {
                        html += "<div class='weui-cells__title f16 yahei block'><div class='boss-word boss-tag5' style='background-color:rgb(246, 181, 97);'></div><div class='f-left m-left5'>" + arr[i].name + "</div></div>";
                    }
                   
                    for (var j = 0; j < list.length; j++) {
                        var item = list[j]
                        if (arr[i].CategoryId == item.CategoryId) {
                            html += "<div class='weui-flex__item bg-gray left width'><div  class='placeholder ta-center item"+item.Id+"' data=" + item.Id + ">" + item.TagName + "</div></div>";
                        }
                    }
                    if (arr[i].name == '其他') {
                        //显示添加按钮
                        html += "<div class='weui-flex__item width label-sliod a-showdialog' style='float:left;width:23%'><div class='placeholder ta-center f24'>+</div></div>";
                    }

                    html += "<div class='m-bottom'></div></div>"
                }

                $('.list').html(html);
                loadClientTag();
                bindBtn();
            })
        }

        //加载选中的标签
        function loadClientTag() {
            GetTagRelationListById(clientId, staffId);
        }

        function getCategoryList() {
            //1 基本信息，2 关注点，3 级别，4 类型，5 跟进状态，6 成交状态，7 付款状态，100 其他
            var arr = [
                { CategoryId: 1, name: "基本信息" },
                { CategoryId: 2, name: "关注点" },
                { CategoryId: 3, name: "级别" },
                { CategoryId: 4, name: "类型" },
                { CategoryId: 5, name: "跟进状态" },
                { CategoryId: 6, name: "成交状态" },
                { CategoryId: 7, name: "付款状态" },
                { CategoryId: 100, name: "其他" }
            ];
            return arr;
        }

        //添加标签
        function addTag() {
            var tagName = $(".tagname").val();
            if (trim(tagName) == "") {
                closeDialog();
                Alert("请填写标签名称");
                return;
            }
            ajaxPost(siteApiList.AddClientTag, "staffId=" + staffId + "&tagName=" + tagName, function (data) {
                closeDialog();
                if (!isJsonSuccess(data))
                    return;
                if (data.Data == 0) {
                    GetCustomerDetail();
                    loadAllTag();
                    toast.show("添加成功!");
                }
                //load();
            });
        }


        function bindBtn() {
            $(".a-showdialog").click(function () { showDialog() })
            $('.weui-flex__item').click(function () {
                var id = $(this).children().attr("data");
                if ($(this).children().css('background-color') == $(this).parents().children().eq(0).children().css('background-color')) {
                    $(this).children().css('background-color', '');
                } else {
                    $(this).children().css('background-color',$(this).parents().children().eq(0).children().css('background-color'));
                }
                var tagname = "";
                $(".weui-flex__item").children().each(function (index,item) {
                    //console.log($(".item" + index).css("background-color"));
                    if ($(".item" + index).css("background-color") == 'rgb(99, 243, 207)' || $(".item" + index).css("background-color") == 'rgb(75, 169, 241)' || $(".item" + index).css("background-color") == 'rgb(246, 181, 97)') {
                        tagname += $(".item" + index).text() + ",";
                    }
                    console.log(tagname);
                });
                 AddTagRelation(id, clientId, tagname.substr(0, tagname.length - 1));
            })
        }

        function showDialog() {
            $('#dialog').css('display', '');
            $(".tagname").focus();
        }
        function closeDialog() {
            $('#dialog').css('display', 'none');
        }
       
    </script>

</body>

</html>